<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
    <th:block th:include="include :: head('将校验规则写到控件中')" />
</head>
<body>

    <div class="container">
        <!--form表单onsubmit属性写上调用的js方法 如下调用checkForm()方法-->
        <form onsubmit="return checkForm()">
            <div class="form-group">
                <!--<label for="username">用户名</label>-->
                <input type="text" class="form-control" name="username" id="username" placeholder="User Name">
                <!--放错误反馈-->
                <div class="invalid-feedback" id="username-feedback"></div>
            </div>
            <div class="form-group">
                <!--<label for="password">密码</label>-->
                <input type="password" class="form-control" name="password" id="password" placeholder="Password">
            </div>
            <div class="form-group">
                <div class="checkbox" style="width:50%;float:left;">
                    <label>
                        <input type="checkbox" name="remember"> 记住我
                    </label>
                </div>
                <div style="width:50%;float:left;">
                    <button type="submit" class="btn btn-primary btn-block">登录</button>
                </div>
            </div>
        </form>
    </div>
    <div th:replace="include :: footer"></div>
    <script>
        //以检查用户名不能为空不能有特殊符号为例
        function checkForm() {
            var username = document.getElementById("username");//获取username那个div
            var feedback = document.getElementById("username-feedback");
            //不能为空
            if (username.value == "") {
                feedback.innerHTML = "用户名为空！";//修改username-feedback div中的内容
                username.classList.remove("is-valid");//清除合法状态
                username.classList.add("is-invalid");//添加非法状态
                return false;//onsubmit  return false阻止表单提交
            }
            //不能有特殊符号
            var patrn = /[@#\$%\^&\*]+/g;//正则表达式
            if (patrn.exec(username.value)) {
                feedback.innerHTML = "用户名不能存在特殊符号！";
                username.classList.remove("is-valid");
                username.classList.add("is-invalid");
                return false;
            }

            //清除错误提示，改成成功提示
            username.classList.remove("is-invalid");
            username.classList.add("is-valid");
            feedback.innerHTML = "";
            return true;
        }
    </script>

</body>
</html>
